<template>
	<div class="mall-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="mall-item-wrap" v-for="(item,index) in itemArr" :key="index">
			<p class="item-top">
				<span>{{item.title}}</span><a href="javascript:;">{{item.more}}</a>
			</p>
			<div class="item-wrap-one">
				<div class="jy-item" v-for="(imgItem,index) in item.imgMsg" :key="index">
					<img :src="imgItem.imgUrl" alt="">
					<p>{{imgItem.title}}</p>
				</div>
			</div>
		</div>
		<div class="hot-recom-wrap">
			<p class="hot-title">热门推荐</p>
			<div  :class="index%2===0?'hot-recom-item recomOdd':'hot-recom-item'"
				v-for="(item,index) in hotRecomArr" :key="index">
				<router-link 
					:to="{name:'recomdetail',params:{id:item.id}}"
				> 
					<img :src="item.imgUrl" alt=""> 
				</router-link>
				<p>{{item.title}}</p>
				<p><i class="iconfont icon-renminbi"></i><span>{{item.price}}</span></p>
			</div>
		</div>
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	import  "../../assets/iconfont/iconfont.css"
	export default{
		name:'secondmall',
		data(){
			return{
				recomStyle:"",
				hotRecomArr:[
					{
						id:1,
						title:'雅阁粉系床',
						price:1299,
						imgUrl:require("../../assets/images/shopping/ershou1.png")
					},
					{
						id:2,
						title:'简约欧式',
						price:3299,
						imgUrl:require("../../assets/images/shopping/ershou2.png")
					},
					{
						id:3,
						title:'雅阁粉系床',
						price:1299,
						imgUrl:require("../../assets/images/shopping/ershou1.png")
					},
					{
						id:4,
						title:'简约欧式',
						price:3299,
						imgUrl:require("../../assets/images/shopping/ershou2.png")
					}
				],
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-gouwuche"
						}
					],
					placeholder:"搜索你想要的区域",
					aimUrl:"/layout/shopping",
					rightUrl:'/shopping/shopcar'
				},
				itemArr:[
					{
						title:'家用电器',
						more:"更多",
						imgMsg:[
							{
								title:"电视",
								imgUrl:require("../../assets/images/shopping/dianshi@3x.png")
							},
							{
								title:"冰箱",
								imgUrl:require("../../assets/images/shopping/bingxiang@3x.png")
							},
							{
								title:"洗衣机",
								imgUrl:require("../../assets/images/shopping/xiyiji@3x.png")
							},
							{
								title:"空调",
								imgUrl:require("../../assets/images/shopping/kongtiao@3x.png")
							}	
						]
					},
					{
						title:'家用家具',
						more:"更多",
						imgMsg:[
							{
								title:"沙发",
								imgUrl:require("../../assets/images/shopping/sofa@3x.png")
							},
							{
								title:"桌椅",
								imgUrl:require("../../assets/images/shopping/zhuoyi@3x.png")
							},
							{
								title:"柜子",
								imgUrl:require("../../assets/images/shopping/yizi@3x.png")
							},
							{
								title:"照明",
								imgUrl:require("../../assets/images/shopping/zhaoming@3x.png")
							}	
						]
					}
				]
			}
		},
		components:{
			ShopHeader
		},
		methods:{
		}
	}
</script>
<style scoped lang="less">
	.mall-container{
		width: 100%;
		background-color:#efefef;
		overflow: hidden;
		.titleWrap(){
			width: 100%;
			height: 48 / 2 / 50rem;
			position: relative;
			color: rgba(0,0,0,.8);
			font-size: 14 / 50rem;
		}
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		@wrapHeight:20 / 2 / 50rem;
		.mall-item-wrap{
			width: 95%;
			height: 236 / 2 / 50rem;
			margin: 0 auto;
			margin-top: @wrapHeight;
			margin-bottom: @wrapHeight;
			.item-top{
				.titleWrap();
				a{
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.item-wrap-one{
				width: 100%;
				height: 188 / 2 / 50rem;
				background-color: #fff;
				border-radius: 8 / 2 / 50rem;
				.jy-item{
					width: 25%;
					height: 100%;
					float: left;
					text-align: center;
					img{
						width: 102 / 2 / 50rem;
						height: 102 / 2 / 50rem;
						vertical-align: middle;
						margin: 24 / 2 / 50rem 0 16 / 2 / 50rem 0;
					}
				}
			}
		}
		.hot-recom-wrap{
			width: 95%;
			margin: 0 auto;
			p.hot-title{
				.titleWrap();
			}
			.hot-recom-item{
				width: 337 / 2 / 50rem;
				height: 418 / 2 / 50rem;
				float: left;
				margin-bottom: 20 / 2 / 50rem;
				background-color:#fff;
				img{
					width: 337 / 2 / 50rem;;
					height: 267 / 2 / 50rem;
					margin-bottom: 22/ 2 / 50rem;
				}
				p{
					font-size: 14 / 50rem;
					color: #333;
					font-weight: 700;
					margin-left: 24 / 2 / 50rem;
					margin-bottom: 20 / 2 / 50rem;
					i,span{
						color: #f55;
						font-size: 12 / 50rem;
						font-weight: normal;
					}
				}
			}
			.recomOdd{
				margin-right: 34 / 2 / 50rem;
			}
		}
	}
</style>